import { Flex, Select } from 'antd';
import Dot from '@/pages/iot/components/Dot.tsx';
import DataSummary from '@/pages/iot/components/DataSummary.tsx';
import { createStyles } from 'antd-style';
import { useCatch } from '@/hooks';
import { useQuery } from '@tanstack/react-query';
import EventCenterServices from '@/api/services/eventCenterServices.ts';
import { useRef, useState } from 'react';
import { EmptyImage, FullScreenIconIot } from '@ycx/ui';
import { useSetSiderCollapsed, useTheme } from '@/store/settingsStore.ts';
import EventCenterList from '@/pages/iot/components/EventCenterList.tsx';
import AlarmCard from '@/pages/iot/components/AlarmCard.tsx';
import AlarmHandleCard from '@/pages/iot/components/AlarmHandleCard.tsx';
import AlarmTrend from '@/pages/iot/components/AlarmTrend.tsx';
import LiveVideoC from '@/pages/iot/components/LiveVideoC.tsx';

const useStyle = createStyles(({ css }) => {
  return {
    dataSummaryWrapper: css`
      border-left: 1px solid var(--ycx-font-color-l4);
      position: relative;
      padding-left: 44px;
    `,
    card: css`
      background-color: var(--ycx-card-bg-color);
      border-radius: 8px;
      flex: 1;
      padding: 24px;
    `,
    fullScreen: css`
      color: var(--ycx-font-color-l3);
      cursor: pointer;
    `,
  };
});

const Iot = () => {
  const catchFn = useCatch();
  const { styles } = useStyle();
  const [carNo, setCarNo] = useState<string>();
  const theme = useTheme();

  const { data: deviceOptions } = useQuery({
    queryKey: ['deviceList'],
    queryFn: () => catchFn(() => EventCenterServices.getDeviceList()),
    select: ({ data }) => data.map((item) => ({ label: item.carNo, value: item.carNo })),
  });

  const setSiderCollapsed = useSetSiderCollapsed();

  const fullScreen = useRef(false);

  const handleFullScreen = () => {
    if (!fullScreen.current) {
      document.querySelector('.main-content')?.requestFullscreen();
      setSiderCollapsed(true);
    } else {
      document.exitFullscreen();
      setSiderCollapsed(false);
    }

    fullScreen.current = !fullScreen.current;
  };

  return (
    <>
      <Flex vertical>
        <Flex justify="space-between" align="center" className="mb-8">
          <Select
            placeholder="请选择"
            allowClear
            showSearch
            style={{ width: '325px' }}
            options={deviceOptions}
            onChange={(value) => {
              setCarNo(value);
            }}
          />
          <Flex
            className={`text-xs ${styles.fullScreen}`}
            align="center"
            gap={8}
            onClick={handleFullScreen}
          >
            {!fullScreen.current ? (
              <>
                <FullScreenIconIot />
                全屏模式
              </>
            ) : (
              '退出全屏'
            )}
          </Flex>
        </Flex>

        <Flex className="mb-8 pl-2" gap={118}>
          <div className={styles.dataSummaryWrapper}>
            <Dot className="absolute -left-2 -top-2" />
            <DataSummary carNo={carNo} />
          </div>

          <Flex className={styles.card} gap={24}>
            <div className="flex flex-1 items-center justify-center">
              {carNo ? (
                <LiveVideoC carNo={carNo} />
              ) : (
                <EmptyImage
                  theme={theme}
                  description="选择设备后可查看视频..."
                  style={{
                    fontSize: '12px',
                  }}
                  imageStyle={{
                    height: '128px',
                  }}
                />
              )}
            </div>
            <div>
              <EventCenterList />
            </div>
          </Flex>
        </Flex>

        <Flex gap={32} wrap>
          <AlarmCard carNo={carNo} />
          <AlarmHandleCard carNo={carNo} />
          <AlarmTrend />
        </Flex>
      </Flex>
    </>
  );
};

export default Iot;
